<template>
  <div class="question-chart">
    <!-- 头部 -->
    <div class="header">
      <span>试题方向</span>
      <i class="el-icon-warning"></i>
    </div>
    <!-- 内容 -->
    <div class="chart">
      <div class="qusChart" ref="questionChart"></div>
    </div>
    <div class="hr"></div>
    <!-- 底部 -->
    <div class="footer">
      <span>试题库数量</span>
      <span class="number">10,234</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 试题方向数据
      question: {
        radar: [
          {
            indicator: [
              { text: '逻辑思维', max: 100 },
              { text: '项目相关', max: 100 },
              { text: '基础知识', max: 100 },
              { text: '理论基础', max: 100 },
              { text: '高阶技术', max: 100 }
            ],
            radius: 50,
            splitArea: {
              areaStyle: {
                color: ['rgba(114, 172, 209, 0.2)'],
                shadowBlur: 10
              }
            }
          }
        ],
        series: [
          {
            type: 'radar',
            areaStyle: {},
            symbol: 'none',
            data: [
              {
                value: [75, 80, 70, 65, 85],
                name: '试题方向',
                itemStyle: {
                  normal: {
                    color: '#2ec7c9', // 选择区域颜色
                    lineStyle: {
                      color: '#2ec7c9'
                    }
                  }
                }
              }
            ]
          }
        ]
      }
    }
  },
  created() {},
  mounted() {
    this.getMyCheart()
  },
  methods: {
    async getMyCheart() {
      // 基于准备好的dom，初始化echarts实例
      const questionChart = this.$refs.questionChart
      if (questionChart) {
        const myChart = this.$echarts.init(questionChart)
        myChart.setOption(this.question)
        window.addEventListener('resize', function() {
          myChart.resize()
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.question-chart {
  display: flex;
  flex-direction: column;
  .chart {
    position: relative;
    height: 160px;
    .qusChart {
      position: relative;
      width: 100%;
      height: 100%;
    }
  }
}
</style>
